<template>
  <div class="details-bg">
    <!-- 导航 -->
    <van-nav-bar left-arrow @click-left="goBack" :border="false" fixed />
    <!-- 视频 autoplay loop -->
    <div class="video-box">
      <video :src="diarya.diaryVideo" autoplay loop class="video"></video>
    </div>
    <!-- 日记内容 -->
    <div class="content">
      <div class="title">
        <img :src="diarya.userAvatar" alt="" class="user-img" />
        <span class="user-name">{{diarya.userName}}</span>
      </div>
      <p class="article">
        {{diarya.diaryArticle}}
      </p>
      <div class="pets">
        <div class="pet-cell">
          <span class="pet-name">{{diarya.petNameone}}</span>
        </div>
         <div class="pet-cell" v-if="diarya.petNametwo">
          <span class="pet-name" >{{diarya.petNametwo}}</span>
        </div>
         <div class="pet-cell" v-if="diarya.petNamethree">
          <span class="pet-name">{{diarya.petNamethree}}</span>
        </div>
      </div>
      <div class="pubdate">发布于{{diarya.diaryDate}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      diarya: [],
      pets:[]
    }
  },
  mounted () {
        let did=this.$route.query.did
         this.axios.get(`http://120.79.2.254:3000/diaryID?did=${did}`).then(res=>{
           console.log(res);
                this.diarya=res.data.results;
         })
  },
  // watch: {
  //   // diarya(newValue, oldValue) {
  //   //   console.log(newValue);
  //   //   this.pets.push(this.diarya.petNameone)
  //   //   this.pets.push(this.diarya.petNametwo)
  //   //   this.pets.push(this.diarya.petNamethree)
  //   //   console.log(this.pets);
  //   // }
  // },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.details-bg {
  width: 100vw;
  height: 100vh;
  background-color: #010101;
  position: relative;
}

// 左箭头
::v-deep .van-icon-arrow-left:before {
  color: #a7a7a7;
}

// 导航背景色
::v-deep .van-nav-bar {
  background-color: rgba(0, 0, 0, 0.3);
}

.video-box {
  width: 100vw;
  height: 133vw;
  overflow: hidden;
  position: relative;
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 0;
  margin: auto;

  .video {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

.content {
  width: 90%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  color: #fff;
  font-size: 0.8em;
  .title {
    margin-bottom: 2vw;
    .user-img {
      width: 12vw;
      border-radius: 50%;
      margin-right: 3vw;
    }
    .user-name {
      font-size: 1.1em;
    }
  }
  .article {
    line-height: 1.8em;
    margin-bottom: 2vw;
  }
  .pets {
    display: flex;
    flex-wrap: wrap;
    .pet-cell {
      padding: 0.8vw 3vw;
      border-radius: 5vw;
      background-color: #fff;
      margin-right: 3vw;
      margin-bottom: 3vw;
      line-height: 8.6vw;
      .pet-img {
        width: 7vw;
        border-radius: 50%;
        margin-right: 1vw;
      }
      .pet-name {
        color: #333;
      }
    }
  }
  .pubdate {
    color: #a7a7a7;
    margin-bottom: 2vw;
  }
}
</style>